<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
<div id="box">
    <com-a></com-a>
    <com-b></com-b>
    <com-c></com-c>
</div>
<script type="text/javascript" src="../lib/vue.min.js"></script>
<script type="text/javascript">
    //准备一个空的实例对象
    var Event=new Vue();

    var A={
        template:`
                <div>
                    <span>我是A组件</span> -> {{a}}
                    <input type="button" value="把A数据给C" @click="send">
                </div>
            `,
        methods:{
            send(){
                Event.$emit('a-msg',this.a);
            }
        },
        data(){
            return {
                a:'我是a数据'
            }
        }
    };
    var B={
        template:`
                <div>
                    <span>我是B组件</span> -> {{a}}
                    <input type="button" value="把B数据给C" @click="send">
                </div>
            `,
        methods:{
            send(){
                Event.$emit('b-msg',this.a);
            }
        },
        data(){
            return {
                a:'我是b数据'
            }
        }
    };
    var C={
        template:`
                <div>
                    <h3>我是C组件</h3>
                    <span>接收过来的A的数据为: {{a}}</span>
                    <br>
                    <span>接收过来的B的数据为: {{b}}</span>
                </div>
            `,
        data(){
            return {
                a:'',
                b:''
            }
        },
        mounted(){
            //var _this=this;使用bind
            //接收A组件的数据
            Event.$on('a-msg',function(a){
                this.a=a;
            }.bind(this));

            //接收B组件的数据
            Event.$on('b-msg',function(a){
                this.b=a;
            }.bind(this));
        }
    };

    new Vue({
        el:'#box',
        components:{
            'com-a':A,
            'com-b':B,
            'com-c':C
        }
    });
</script>
</body>
</html>